<template>
  <div id="app">
    <!-- <div class="box" />
    <div class="box1" /> -->
    <router-view />
    <!-- <ul>
      <li v-for="(item,index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="btn">点我修改数组</button> -->
    <!-- 演示作用域插槽 -->
    <!-- <SLOTDEMO :list="departs">
      <template slot-scope="{data}">
        <h3>{{ data.name }}</h3>
      </template>
    </SLOTDEMO> -->
  </div>
</template>

<script>
// 导入scss中定义的变量和值
// import obj from '@/styles/variables.scss'
// console.log(obj)
// import SLOTDEMO from './slot.vue'
export default {
  name: 'App',
  components: {
    // SLOTDEMO
  },
  data() {
    return {
      departs: [
        { name: '总裁办' },
        { name: '行政部' },
        { name: '人事部' }
      ]
    }
  },
  methods: {
    // btn() {
    // const newArr = [4, 5, 6]
    // 对数据重新赋值可以造成视图改变
    // this.arr = newArr
    // this.arr = [...this.arr, ...newArr]
    // this.arr.push(...newArr)
    // 直接修改数组内的值, 会不会造成视图变化? 不会造成视图变化
    // this.arr[0] = 4
    // this.$set(this.arr, 0, 4)
    // this.arr.push(4, 5)
    // this.obj.name = 'ls'
    // this.$set(this.obj, 'name', 'ls')
    // this.obj = { ...this.obj, name: 'ls' }
    // }
  }
}

</script>
<style>
  ul, button {
    position: relative;
    z-index: 99999;
  }
  a {
    color: red;
  }
</style>
<!-- <style lang="scss">
  $color1: blue;
  $color2: red;
   // 混入 先声明函数
  @mixin re($width, $height, $bgc) {
    position: relative;
    z-index: 99999;
    width: $width;
    height: $height;
    background-color: $bgc;
  }
  .box {
    // 调用函数
    @include re(100px, 100px, $color1);
  }
  .box1{
    // 调用函数
    @include re(200px, 200px, $color2);
  }
</style> -->

